<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谁不说俺家乡好 - 主页内容</title>
    <style>
        /* 主页内容样式 */
        body {
            margin: 0;
            padding: 20px;
            background-color: #fff8dc;
            font-family: "Microsoft YaHei", "SimSun", serif;
            color: #333;
            line-height: 1.6;
        }
        
        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #d2b48c;
        }
        
        /* 页面标题 */
        .page-title {
            text-align: center;
            color: #8B4513;
            font-size: 28px;
            margin-bottom: 30px;
            font-family: "SimSun", serif;
            border-bottom: 2px solid #8B4513;
            padding-bottom: 15px;
        }
        
        /* 欢迎语 */
        .welcome-section {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background-color: #fdf6e3;
            border-radius: 8px;
        }
        
        .welcome-text {
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        /* 景点介绍区域 */
        .scenic-spots {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .spot-card {
            flex: 1;
            min-width: 300px;
            background-color: #f8f4e6;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #d2b48c;
        }
        
        .spot-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }
        
        .spot-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-bottom: 1px solid #d2b48c;
        }
        
        .spot-content {
            padding: 20px;
        }
        
        .spot-title {
            color: #8B4513;
            font-size: 20px;
            margin-top: 0;
            margin-bottom: 10px;
            font-family: "SimSun", serif;
        }
        
        .spot-description {
            margin-bottom: 15px;
            color: #555;
        }
        
        .spot-link {
            display: inline-block;
            padding: 8px 15px;
            background-color: #8B4513;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .spot-link:hover {
            background-color: #A0522D;
        }
        
        /* 浙江简介 */
        .zhejiang-intro {
            background-color: #fdf6e3;
            padding: 25px;
            border-radius: 8px;
            margin-bottom: 30px;
            border: 1px solid #d2b48c;
        }
        
        .intro-title {
            color: #8B4513;
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 15px;
            font-family: "SimSun", serif;
        }
        
        .intro-content {
            text-indent: 2em;
            margin-bottom: 10px;
        }
        
        /* 中国传统装饰 */
        .chinese-pattern {
            height: 20px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20"><path d="M0,10 C10,0 30,0 40,10 C30,20 10,20 0,10 Z" fill="%23d2b48c"/></svg>');
            background-repeat: repeat-x;
            margin: 30px 0;
        }
        
        /* 页脚信息 */
        .footer-info {
            text-align: center;
            color: #666;
            font-size: 14px;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #d2b48c;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .content-container {
                padding: 20px;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .scenic-spots {
                flex-direction: column;
            }
            
            .spot-card {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="content-container">
        <h1 class="page-title">浙江风光 - 谁不说俺家乡好</h1>
        
        <!-- 欢迎语部分 -->
        <div class="welcome-section">
            <p class="welcome-text">欢迎来到"谁不说俺家乡好"主题网站！这里将带您领略浙江的自然风光和人文景观。</p>
        </div>
        
        <!-- 浙江简介 -->
        <div class="zhejiang-intro">
            <h2 class="intro-title">浙江简介</h2>
            <p class="intro-content">浙江，简称"浙"，省会杭州，位于中国东南沿海，长江三角洲南翼。境内自然风光秀美，人文底蕴深厚，是中国著名的旅游大省。</p>
            <p class="intro-content">浙江拥有丰富的旅游资源，从西湖的柔美到四明山的壮丽，从鲁迅故居的人文情怀到古镇水乡的江南韵味，每一处都展现着浙江独特的魅力。</p>
        </div>
        
        <div class="chinese-pattern"></div>
        
        <!-- 景点介绍 -->
        <h2 class="page-title">精选景点</h2>
        
        <div class="scenic-spots">
            <!-- 杭州西湖 -->
            <div class="spot-card">
                <img src="../西湖.jpeg" alt="杭州西湖" class="spot-image">
                <div class="spot-content">
                    <h3 class="spot-title">杭州西湖</h3>
                    <p class="spot-description">杭州西湖是中国著名的风景名胜区，被誉为"人间天堂"。西湖以其秀美的湖光山色和丰富的历史文化遗迹闻名于世，是国家5A级旅游景区。</p>
                    <a href="west-lake.html" target="_self" class="spot-link">了解更多</a>
                </div>
            </div>
            
            <!-- 余姚四明山 -->
            <div class="spot-card">
                <img src="../image/split-5.png" alt="余姚四明山" class="spot-image">
                <div class="spot-content">
                    <h3 class="spot-title">余姚四明山</h3>
                    <p class="spot-description">四明山位于宁波余姚市，是中国南方重要的革命老区，也是著名的避暑胜地。这里山清水秀，森林茂密，有着丰富的自然景观和人文历史。</p>
                    <a href="siming-mountain.html" target="_self" class="spot-link">了解更多</a>
                </div>
            </div>
            
            <!-- 绍兴鲁迅故居 -->
            <div class="spot-card">
                <img src="../image/split-7.png" alt="绍兴鲁迅故居" class="spot-image">
                <div class="spot-content">
                    <h3 class="spot-title">绍兴鲁迅故居</h3>
                    <p class="spot-description">鲁迅故居位于绍兴市越城区，是中国现代文学巨匠鲁迅的出生地和青少年时期生活的地方。这里保存着许多与鲁迅相关的文物和历史遗迹。</p>
                    <a href="luxun-residence.html" target="_self" class="spot-link">了解更多</a>
                </div>
            </div>
        </div>
        
        <div class="chinese-pattern"></div>
        
        <!-- 互动提示 -->
        <div class="welcome-section">
            <p class="welcome-text">请使用左侧导航菜单浏览更多内容，或点击上方"拼图游戏"体验互动乐趣！</p>
        </div>
        
        <!-- 页脚信息 -->
        <div class="footer-info">
            <p>? 2023 谁不说俺家乡好 - 浙江风光主题网站 | 版权所有</p>
        </div>
    </div>
    
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const spotCards = document.querySelectorAll('.spot-card');
            
            spotCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 300 + index * 200);
            });
        });
        
        // 添加平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>